<script setup lang="ts">
import * as echarts from 'echarts'
import {onMounted, ref} from 'vue'
import {getCoverageStatisticsApi} from "@/api/chartApis.ts";

const provinceChart = ref()
const bigCityChart = ref()

/**
 * 异步初始化数据，用于绘制两个图表：全国省会城市网格覆盖率和大城市的网格覆盖率。
 * @param chartDom1 ECharts 实例，用于显示省会城市网格覆盖率的图表。
 * @param chartDom2 ECharts 实例，用于显示大城市网格覆盖率的图表。
 * @returns {void}
 */
const initData = async (chartDom1: any, chartDom2 : any) => {
  let res = await getCoverageStatisticsApi()
  let provinceCoverage = ''
  let bigCityCoverage = ''
  if (res?.data.code == 200){
    provinceCoverage = (res.data.data.capitalCoverage*100).toFixed(2)
    bigCityCoverage = (res.data.data.cityCoverage*100).toFixed(2)
  }

  let provinceOption
  provinceOption = {
    title: {
      text: '全国省会城市网格覆盖率(%)',
      left: 'center',
      textStyle: {
        color: '#ffffff',
        fontSize: 12
      }
    },
    series: [
      {
        type: 'gauge',
        progress: {
          show: true,
          width: 12,
          itemStyle: {
            color: '#4cce10'
          }
        },
        axisLine: {
          lineStyle: {
            width: 12,
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          distance: 2,
          length: 8,
          lineStyle: {
            width: 1,
            color: '#fff'
          }
        },
        axisLabel: {
          distance: 12,
          color: '#fff',
          fontSize: 10
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 8,
          itemStyle: {
            borderWidth: 10
          }
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          fontSize: 16,
          color: '#4cce10',
          offsetCenter: [0, '70%']
        },
        data: [
          {
            value: provinceCoverage,
          }
        ]
      }
    ]
  };

  let bigCityOption
  bigCityOption = {
    title: {
      text: '全国省会城市网格覆盖率(%)',
      left: 'center',
      textStyle: {
        color: '#ffffff',
        fontSize: 12
      }
    },
    series: [
      {
        type: 'gauge',
        progress: {
          show: true,
          width: 12,
          itemStyle: {
            color: '#f69aab'
          }
        },
        axisLine: {
          lineStyle: {
            width: 12,
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          distance: 2,
          length: 8,
          lineStyle: {
            width: 1,
            color: '#fff'
          }
        },
        axisLabel: {
          distance: 12,
          color: '#fff',
          fontSize: 10
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 8,
          itemStyle: {
            borderWidth: 10
          }
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          fontSize: 16,
          color: '#f69aab',
          offsetCenter: [0, '70%']
        },
        data: [
          {
            value: bigCityCoverage
          }
        ]
      }
    ]
  };
  chartDom2.setOption(bigCityOption)
  chartDom1.setOption(provinceOption)
}



onMounted(()=>{
  let chartDom1 = echarts.init(provinceChart.value)
  let chartDom2 = echarts.init(bigCityChart.value)
  initData(chartDom1, chartDom2)
})
</script>

<template>
  <div class="w-11/12 flex justify-between items-center " style="height: 30%">
<div class="w-1/2 h-full"  ref="provinceChart">
</div>
  <div class="w-1/2 h-full" ref="bigCityChart">
  </div>
  </div>
</template>

<style scoped>

</style>
